//out:index.css
@base:0.01;
body{
    display: flex;
    flex-direction: column;
    height:100vh;

}
.header-wrapper{
    height:@base*40rem;
    display: flex;
    justify-content: space-between;
    line-height: @base*40rem;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
    .item{
        text-align: center;
        width:33.3%;
        &.active{
            span{
                padding:@base*3rem 0rem;
                border-bottom: 2px solid blue;
            }
        }
    }
}
.container{
    flex:1;
    overflow: auto;
}
.footer-wrapper{
    height: @base*60rem;
    display: flex;
    justify-content: space-between;
    .item{
        width:33.3%;
        line-height: @base*60rem;
        text-align: center;
    }
}

.swiper-container {
    width: 100%;
    height: @base*200rem;
    .swiper-slide{
        position: relative;
        img{
            width:100%;
            height:100%;
        }
        .info{
            height:@base*45rem;
            background: rgba(7,17,27,0.5);
            position: absolute;
            bottom: 0;
            left:0;
            width:100%;
            padding:@base*5rem @base*10rem;
            box-sizing: border-box;
            h3{
                color:#fff;
                font-size: @base*12rem;
            }
            p{
                color:rgba(255,255,255,0.8);
                font-size: @base*10rem;
            }
        }
    }
}

.article-list{
    padding:@base*5rem;
    background: #fff;
    .item{
        display: flex;
        padding:@base*8rem 0;
        border-bottom: 1px solid #e0e0e0;
        color:#333;
        img{
            width:@base*69rem;
            height:@base*55rem;
        }
        .info{
            margin-left: @base*10rem;
            font-size: @base*10rem;
            h3{
                margin-bottom: @base*5rem;
                color:#333;
            }
            .desc{
                height:@base*35rem;
                overflow: hidden;
                color:rgba(7,17,27,0.6);
            }
        }
    }
}
